<template>
    <div style="overflow-x: hidden">
        <el-menu
                mode="vertical"
                default-active="2"
                class="el-menu-vertical-demo"
                background-color="#545c64"
                text-color="#fff"
                router
                active-text-color="#ffd04b"
                :unique-opened=true
                :collapse="isCollapse">
<!--            menu-trigger="click"  horizontal模式-->
        <!-- 循环菜单数据 -->
        <label v-for="item in menuData" :key="item.id">
            <!-- 判断是否有子菜单，如果有就创建submenu，没有就创建menu-item -->
            <el-submenu ref="subMenu" :index="item.id+''" v-if="item.children">
                <template slot="title">
                    <i :class="item.authorityIco"></i>
                    <span>{{ item.authorityName }}</span>
                </template>
                <label>
                    <!-- 自己调用自己 -->
                    <MenuTree :menuData="item.children"></MenuTree>
                </label>
            </el-submenu>

            <el-menu-item v-else :index="item.authorityPath">
                <template slot="title">
                    <i class="el-icon-tickets"></i>
                    <span>{{ item.authorityName }}</span>
                </template>
            </el-menu-item>
        </label>
        </el-menu>
    </div>
</template>

<script>
    import $ from 'jquery'
    export default {
        name: "MenuTree",
        props: {
            menuData: {

            },
            isCollapse:{

            },
        },
        data() {
            return {

            };
        },
        created() {},
        methods: {
            changeMenu(){
                if(this.$route.path==="/home/homePage"){
                    sessionStorage.setItem("submenu","心心念念");
                    sessionStorage.setItem("menuitem","主页");
                }
                $.each(this.menuData,(i,n)=>{
                    $.each(n.children,(a,b)=>{
                        $.each(b.children,(c,d)=>{
                            if(this.$route.path===d.authorityPath){
                                sessionStorage.setItem("submenu",n.authorityName);
                                sessionStorage.setItem("menuitem",d.authorityName);
                            }
                        })
                    })
                });
                this.$emit("changeMenu")
            },
        },
        watch:{
            "$route":"changeMenu"
        }
    };
</script>

<style scoped>
    .el-menu-vertical-demo:not(.el-menu--collapse) {
        width: 200px;
    }
    .el-menu--collapse {
        width: 49px;
    }
    .el-menu-vertical-demo {
        overflow-x: hidden;
        overflow-y: hidden;
        text-align: left;
    }

    .menu-Bar:not(.el-menu--collapse) {
        width: 200px;
        min-height: 400px;
    }
</style>